<template>
	<view class="mt-30">
		<text>评论区：</text>
		<u-line margin="20rpx 0 0 0" color="#c5a767"></u-line>

		<!-- 用户写评论的地方 -->
		<view class="padding-5">
			<view class="mt-10 mb-10 flex flex-row flex-nowrap width-per-100">
				<u-avatar
					:text="userinfo.name.slice(0, 1)"
					fontSize="18"
					:size="32"
					randomBgColor
					colorIndex="19"
					class="mr-10"
				></u-avatar>
				<Acard pad="15rpx 20rpx">
					<textarea
						class="fs-gold width-per-100"
						v-model="user_comment"
						placeholder="欢迎高质量的评论,发言不当会被管理员删除."
						count
						:maxlength="200"
						style="height: 200rpx;"
					></textarea>
					<view class="flex flex-row flex-nowrap flex-align-center flex-justify-between mt-5">
						<u-button
							text="评论"
							customStyle="width:50px"
							shape="circle"
							size="mini"
							plain
							@tap="sendComment"
						></u-button>
						<view style="width: 100px;">{{ user_comment.length }}/200</view>
					</view>
				</Acard>
			</view>
			<!-- 评论 -->
			<Comment
				:commentReplyInput.sync="commentReplyInput"
				v-for="comment in comments"
				:key="comment.id"
				:comment="comment"
			></Comment>
			<!-- 加载更多评论 -->
			<u-loadmore :status="status" @loadmore="loadMoreComments" v-if="comments.length>=10" />
		</view>

		<!-- 点回复评论按钮 显示并自动获取焦点的输入框 -->
		<u--input
			focus
			v-if="commentReplyInput.show"
			style="position: fixed;bottom: 0;left: 0;width: 100%;background-color: white;color: #333;"
			@confirm="sendCommentReply"
			@blur="commentReplyInput.show=false"
			maxlength="200"
		></u--input>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Comment from './comment.vue';

export default {
	name: 'CommentSection',
	components: { Comment },
	props: {
		isArticle: {
			default: true
		}
	},
	data() {
		return {
			user_comment: '',
			pageNo: 1,
			limit: 10,
			commentReplyInput: {
				show:false, // 控制显示回复框
				comment_id:null, // 回复的哪个评论
			},
			loadStatus:'loadmore' // 控制加载更多的状态 加载前值为loadmore，加载中为loading，没有数据为nomore
		};
	},
	beforeMount() {
		this.getComment();
	},
	computed: {
		...mapState('user', ['userinfo']),
		...mapState('comment', ['comments'])
	},
	methods: {
		sendComment() {
			let { user_comment } = this;
			if (user_comment.length < 1) {
				// 判断写没写评论
				uni.showToast({
					title: '还没写评论',
					duration: 2000,
					icon: 'error'
				});
			} else {
				let obj = {};
				// 判断发送的是文章的评论 还是讨论的评论
				if (this.isArticle) {
					obj = { article_id: this.$store.getters.article_id };
				} else {
					obj = { talk_id: this.$store.state.talk.userSelectTalk.id };
				}

				this.$store.dispatch('comment/addComment', {
						...obj,
						user_id: this.userinfo.id,
						content: user_comment
					})
					.then(code => {
						if (code === 200) {
							uni.showToast({
								title: '成功',
								duration: 2000
							});
							this.getComment();
							this.user_comment = '';
						} else {
							uni.showToast({
								title: '失败',
								duration: 2000,
								icon: 'error'
							});
						}
					});
			}
		},
		async getComment() {
			let { pageNo, limit } = this;
			if (this.isArticle) {
				await this.$store.dispatch('comment/getComment', {
					article_id: this.$store.getters.article_id,
					pageNo,
					limit
				});
			}else{
				await this.$store.dispatch('comment/getComment', {
					talk_id: this.$store.state.talk.userSelectTalk.id,
					pageNo,
					limit
				});
			}
		},
		sendCommentReply(val) {
			if(val.length>1){
				this.$store.dispatch('comment/addCommentReply',{
					replycomment_id:this.commentReplyInput.comment_id,
					user_id:this.$store.getters.user_id,
					content:val
				}).then(code=>{
					if(code === 200){
						uni.showToast({
							title: '成功',
							duration: 2000
						});
						this.getComment()
					}
				})
			}
		},
		loadMoreComments(){
			this.loadStatus = 'loading';
		}
	}
};
</script>

<style scoped lang="scss"></style>
